<template>
  <div class="create-page">
    <filter-wrap @search="onSearch" />
    
    <a-card class="market-info" size="small" :bordered="false">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-space>
            <span class="label">最低售价：</span>
            <a-input-number v-model:value="marketInfo.minSellPrice" :controls="false" style="width: 120px" />
            <span>更新时间：{{ marketInfo.minSellPriceDate }}</span>
            <span>市场：{{ marketInfo.minSellPriceMarket }}</span>
          </a-space>
        </a-col>
        <a-col :span="12">
          <a-space>
            <span class="label">最高买价：</span>
            <a-input-number v-model:value="marketInfo.maxBuyPrice" :controls="false" style="width: 120px" />
            <span>更新时间：{{ marketInfo.maxBuyPriceDate }}</span>
            <span>市场：{{ marketInfo.maxBuyPriceMarket }}</span>
          </a-space>
        </a-col>
      </a-row>
    </a-card>

    <div class="tier-buttons">
      <a-radio-group v-model:value="currentTop" button-style="solid">
        <a-radio-button v-for="tier in [4,5,6,7,8]" :key="tier" :value="tier">
          T{{ tier }}
        </a-radio-button>
      </a-radio-group>
    </div>

    <a-form layout="vertical" class="create-form">
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="材料1">
            <a-row :gutter="8">
              <a-col :span="8">
                <a-input-number v-model:value="price1" :controls="false" addon-before="价格" />
              </a-col>
              <a-col :span="8">
                <a-input-number v-model:value="count1" :controls="false" addon-before="库存" />
              </a-col>
              <a-col :span="8">
                <a-input-number v-model:value="bili1" :controls="false" addon-before="消耗数" />
              </a-col>
            </a-row>
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="材料2">
            <a-row :gutter="8">
              <a-col :span="8">
                <a-input-number v-model:value="price2" :controls="false" addon-before="价格" />
              </a-col>
              <a-col :span="8">
                <a-input-number v-model:value="count2" :controls="false" addon-before="库存" />
              </a-col>
              <a-col :span="8">
                <a-input-number v-model:value="bili2" :controls="false" addon-before="消耗数" />
              </a-col>
            </a-row>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="制造费">
            <a-input-number v-model:value="order" :controls="false" style="width: 100%" />
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="返还率">
            <a-input-number v-model:value="returnVal" :controls="false" style="width: 100%" />
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="税率+创建费(%)">
            <a-input-number v-model:value="shuilv" :controls="false" style="width: 100%" />
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="售价">
            <a-input-number v-model:value="sellPrice" :controls="false" style="width: 100%" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-button type="primary" @click="onCreate" block>计算</a-button>

      <a-card class="result-card" :bordered="false">
        <a-descriptions bordered>
          <a-descriptions-item label="成本">{{ chengben }}</a-descriptions-item>
          <a-descriptions-item label="销售额">{{ marketPrice }}</a-descriptions-item>
          <a-descriptions-item label="制造费">{{ createPrice }}</a-descriptions-item>
          <a-descriptions-item label="产量">{{ resultCount }}</a-descriptions-item>
          <a-descriptions-item label="税费">{{ shui }}</a-descriptions-item>
          <a-descriptions-item label="纯利润">{{ lirun }}</a-descriptions-item>
        </a-descriptions>
      </a-card>
    </a-form>

    <a-card title="说明" size="small" class="help-card">
      <p>T4 = T4* 2 + T3 * 1</p>
      <p>T5 = T5* 3 + T4 * 1</p>
      <p>T6 = T6* 4 + T5 * 1</p>
      <p>T7 = T7* 5 + T6 * 1</p>
      <p>T8 = T8* 5 + T7 * 1</p>
    </a-card>
  </div>
</template>

<script>
import FilterWrap from "./Filter.vue";
import { getPrice } from "../request";
import { getCityName, makePrice } from '../utils';

export default {
  components: {
    FilterWrap,
  },
  data() {
    return {
      price1: 1160,
      count1: 2000,
      bili1: 4,
      price2: 590,
      count2: 1000,
      bili2: 1,
      order: 86,
      sell: 4000,
      returnVal: 0.366,
      chengben: 0,
      resultCount: 0,
      lirun: 0,
      shuilv: 10.5,
      shui: 0,
      marketPrice: 0,
      createPrice: 0,
      marketInfo: {
        minSellPrice: 0,
        maxBuyPrice: 0,
        minSellPriceMarket: "",
        maxBuyPriceMarket: "",
        minSellPriceDate: "",
        maxBuyPriceDate: "",
      },
      currentTop: 4
    };
  },
  methods: {
   async onSearch(val) {
      const { data } = await getPrice({ item: val.itemId });
      if (data && data.length > 0) {
        const minSellPrice = Math.min(...data.map((item) => item.sell_price_min === 0 ? 999999999 : item.sell_price_min));
        const maxBuyPrice = Math.max(...data.map((item) => item.buy_price_max === 0 ? 0 : item.buy_price_max));
        const getMinSellPriceItem = data.find((item) => item.sell_price_min === minSellPrice);
        const getMaxBuyPriceItem = data.find((item) => item.buy_price_max === maxBuyPrice);
        const minSellPriceMarket = getMinSellPriceItem.city;
        const maxBuyPriceMarket = getMaxBuyPriceItem.city;
        const minSellPriceDate = getMinSellPriceItem.sell_price_min_date;
        const maxBuyPriceDate = getMaxBuyPriceItem.buy_price_max_date;
        this.marketInfo = {
          minSellPrice,
          maxBuyPrice,
          minSellPriceMarket: getCityName(minSellPriceMarket),
          maxBuyPriceMarket: getCityName(maxBuyPriceMarket),
          minSellPriceDate,
          maxBuyPriceDate,
        };
      }
    },
    changeTop(num) {
      this.currentTop = num;
      if (num === 4) {
        this.bili1 = 2
      } else if (num === 5) {
        this.bili1 = 3
      } else if (num === 6) {
        this.bili1 = 4
      } else if (num === 7) {
        this.bili1 = 5
      } else {
        this.bili1 = 5
      }
    },

    onCreate() {
      const data = makePrice({
        tType: this.currentTop,
        item1Price: this.price1,
        item1Count: this.count1,
        item2Price: this.price2,
        createPrice: this.order,
        shuilv: this.shuilv,
        sellPrice: this.sellPrice,
        returnVal: this.returnVal,
      });
      this.createPrice = data.totalCreateChenben;
      this.chengben = data.totalChenben;
      this.shui = data.totalShui;
      this.marketPrice = data.totalMarketPrice
      this.lirun = data.lirun;
      this.resultCount = data.totalCreateCount;
    },
  },
};
</script>

<style scoped>
.create-page {
  padding: 24px;
  background: #f0f2f5;
  min-height: 100vh;
}

.market-info {
  margin-bottom: 24px;
}

.tier-buttons {
  margin-bottom: 24px;
  text-align: center;
}

.create-form {
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  padding: 24px;
  border-radius: 2px;
}

.result-card {
  margin-top: 24px;
}

.help-card {
  margin-top: 24px;
}

.help-card p {
  margin-bottom: 8px;
}

:deep(.ant-input-number) {
  width: 100%;
}

.label {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.85);
}
</style>
